import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Tabs,Input,Button,Row,Col,Select,message,InputNumber,Icon,Radio,Modal,Checkbox} from 'antd';
import styles from '../categorymanagement/index.less';
const Option = Select.Option;
const TabPane = Tabs.TabPane;
const RadioGroup = Radio.Group;

const Pages = ({ category, dispatch, loading }) => {
    return <div className={styles.container}>
        <POSTPage dispatch={dispatch} {...category} loading={loading.global}/>
    </div>;
};

class POSTPage extends React.Component {
    constructor (props) {
        super(props);
        this.newTabIndex = 0;
        const panes = [];
        this.state = {
            activeKey:'000',
            panes,
            title:'',
            titlecon:'',
            detail_type:'2',
            RadioVal:[],
            addContent:[{}],
        };
    }
    componentWillMount () {
        this.props.dispatch({type:'category/getCategoryList',payload:{title_id:localStorage.getItem('id')}});
    }
    onEdit = (targetKey, action) => {
        this[action](targetKey);
    };

    add = () => {
        if (!this.state.title){
            return message.error('未输入目录名称!!');
        }
        // const panes = this.state.panes;
        // const activeKey = `newTab${this.newTabIndex++}`;
        // panes.push({ title: this.state.title, key: activeKey });
        // this.setState({ panes, activeKey });
        this.props.dispatch({type:'category/save',payload:{activeKeyNoChange:false}});
        this.props.dispatch({type:'category/postCategoryListUp',payload:{
            catalog_name:this.state.title,
            title_id:localStorage.getItem('id'),
        }});
    };

    contentView (){
        return <div>
            {
                this.props.content && this.props.content.map((item,index) =>{
                    return <div key={index} style={{
                        margin:'5px 10px 5px 10px',
                        padding:20,
                        border:'1px solid #f5f5f5',
                        boxShadow:'1px 1px 1px #aaa'}}
                    >
                        <h3>{index + 1}.{item.example_name}</h3>
                        <RadioGroup onChange={(e)=>{
                            /*目前不让选中*/
                            // let RadioVal = this.state.RadioVal;
                            // RadioVal[index] = e.target.value;
                            // this.setState({
                            //     RadioVal:RadioVal,
                            // });
                        }} value={this.state.RadioVal[index]}>
                            {
                                item.details && item.details.map((i,index) =>{
                                    return <Radio key={index} style={{
                                        display: 'block',
                                        height: '30px',
                                        lineHeight: '30px',
                                    }} value={i.id}>{i.detail_name}<span style={{float:'right'}}>{i.detail_num}分</span></Radio>;
                                })
                            }
                        </RadioGroup>
                        <br/>
                        <Button onClick={()=>{
                            let that = this;
                            Modal.confirm({
                                title: '确定删除此条记录?',
                                content: '删除后无法恢复,请谨慎操作!!',
                                okText: '是',
                                okType: 'danger',
                                cancelText: '否',
                                onOk () {
                                    that.props.dispatch({type:'category/deleteCategoryDown',payload:{
                                        // catalog_name:this.state.title,
                                        catalog_id:that.state.activeKey,
                                        id:item.id,
                                    }});
                                },
                                onCancel () {
                                    console.log('Cancel');
                                },
                            });
                        }} type="danger" shape="circle" icon="delete"/>
                        <Button onClick={()=>{
                            let arr = [];
                            item.details.map(i =>{
                                arr.push({detail_name:i.detail_name,detail_num:i.detail_num,id:i.id});
                            });
                            this.setState({
                                record:{id:item.id},
                                titlecon:item.example_name,
                                detail_type:item.example_type,
                                addContent:arr,
                            });
                            this.props.dispatch({type:'category/save',payload:{visibleTow:true}});
                        }} style={{margin:10}} type="primary" shape="circle" icon="setting" />
                    </div>;
                })
            }
            <Button onClick={()=>{
                this.props.dispatch({type:'category/save',payload:{visibleTow:true}});
                this.setState({titlecon:'',addContent:[{}],detail_type:'2',record:{}});
            }} style={{width:"100%"}} type="dashed">+添加</Button>
            <Modal
                title="添加题目"
                visible={this.props.visibleTow}
                onOk={()=>{
                    if (this.state.titlecon && this.state.detail_type){
                        let arr = this.state.addContent.notempty();
                        arr.map((item,index)=>{
                            if(!item.detail_name || item.detail_num < 0){
                                return message.error('未填写完整或分数小于0!');
                            }else if(index === arr.length -1){
                                if(this.state.record.id){
                                    this.props.dispatch({type:"category/putCategoryDown",payload:{
                                        example_name:this.state.titlecon,
                                        example_type:this.state.detail_type,
                                        details:arr,
                                        id:this.state.record.id,
                                        catalog_id:this.state.activeKey,
                                    }});
                                }else {
                                    this.props.dispatch({type:"category/postCategoryDown",payload:{
                                        example_name:this.state.titlecon,
                                        example_type:this.state.detail_type,
                                        details:arr,
                                        catalog_id:this.state.activeKey,
                                    }});
                                }
                            }
                        });
                    }else {
                        return message.error('未填写完整!');
                    }
                }}
                onCancel={()=>this.props.dispatch({type:'category/save',payload:{visibleTow:false}})}
            >
                <span style={{margin:10}}>题目:</span><Input style={{width:300}} value={this.state.titlecon} onChange={(e)=>this.setState({
                    titlecon:e.target.value,
                })} placeholder="请输入目录名称"/>
                <div style={{margin:10}} span={24}><Checkbox checked={this.state.detail_type == '1'?true:false} onChange={(e)=>{
                    this.setState({
                        detail_type:e.target.checked ?'1':'2',
                    });
                }}>是否必选</Checkbox></div>
                {
                    this.state.addContent && this.state.addContent.map((item,index) =>{
                        return <Row style={{margin:10}} key={index}>
                            <Col span={8}><Input value={this.state.addContent[index].detail_name} onChange={e=>{
                                let addContent = this.state.addContent;
                                addContent[index].detail_name = e.target.value;
                                this.setState({
                                    addContent:addContent,
                                });
                            }} placeholder="选项"/></Col>
                            <Col style={{textAlign:'center',paddingTop:4}} span={2}>--</Col>
                            <Col span={8}><InputNumber value={this.state.addContent[index].detail_num} onChange={value=>{
                                let addContent = this.state.addContent;
                                addContent[index].detail_num = value;
                                this.setState({
                                    addContent:addContent,
                                });
                            }} style={{width:'100%'}} placeholder="分值"/></Col>
                            <Col span={6}>{
                                index >0 && <Button type="danger" shape="circle" style={{marginLeft:10}} icon="delete" onClick={()=>{
                                    let addContent = this.state.addContent;
                                    delete addContent[index];
                                    this.setState({
                                        addContent :addContent,
                                    });
                                }}/>
                            }</Col>
                        </Row>;
                    })
                }
                <Button onClick={()=>{
                    let addContent = this.state.addContent;
                    addContent.push({});
                    this.setState({
                        addContent :addContent,
                    });
                }} style={{width:"100%"}} type="dashed">+添加</Button>
            </Modal>
        </div>;
    }

    remove = (targetKey) => {
        // console.log('删除操作');
        // console.log(222,targetKey)
        let that = this;
        Modal.confirm({
            title: '确定删除此目录?',
            content: '删除后无法恢复,请谨慎操作!!',
            okText: '是',
            okType: 'danger',
            cancelText: '否',
            onOk () {
                that.props.dispatch({type:'category/save',payload:{activeKeyNoChange:false}});
                that.props.dispatch({type:'category/deleteCategoryListUp',payload:{
                    // catalog_name:this.state.title,
                    id:targetKey,
                }});
            },
            onCancel () {
                // console.log('Cancel');
            },
        });
        // let activeKey = this.state.activeKey;
        // let lastIndex;
        // this.state.panes.forEach((pane, i) => {
        //     if (pane.key === targetKey) {
        //         lastIndex = i - 1;
        //     }
        // });
        // const panes = this.state.panes.filter(pane => pane.key !== targetKey);
        // if (lastIndex >= 0 && activeKey === targetKey) {
        //     activeKey = panes[lastIndex].key;
        // }
        // this.setState({ panes, activeKey });
    };

    render () {
        let {visible,dispatch} = this.props;
        return (
            <div>
                <Tabs
                    hideAdd
                    tabBarExtraContent={<Button onClick={()=>{
                        this.setState({
                            title:'',
                        });
                        dispatch({type:'category/save',payload:{visible:true}});
                    }}>+添加</Button>}
                    onChange={(activeKey)=>{
                        this.props.dispatch({type:'category/save',payload:{activeKeyNoChange:true}});
                        this.props.dispatch({type:'category/getCategoryDown',payload:{catalog_id:activeKey}});
                        this.setState({ activeKey });
                    }}
                    activeKey={this.state.activeKey}
                    type="editable-card"
                    onEdit={this.onEdit}
                >
                    {this.state.panes.map((pane,index) => <TabPane tab={pane.catalog_name} key={pane.id}>
                        {
                            this.contentView()
                        }
                    </TabPane>)}
                </Tabs>
                <Modal
                    title="添加目录"
                    visible={visible}
                    onOk={this.add}
                    onCancel={()=>dispatch({type:'category/save',payload:{visible:false}})}
                >
                    目录名称:<Input style={{width:300,marginLeft:20}} value={this.state.title} onChange={(e)=>this.setState({
                        title:e.target.value,
                    })} placeholder="请输入目录名称"/>
                </Modal>
            </div>
        );
    }
    componentWillReceiveProps (nextProps) {
        if(nextProps.activeKey ==='000' && nextProps.panes){
            this.setState({
                panes:nextProps.panes,
                activeKey:nextProps.panes.length === 0?'000':nextProps.panes[0].id,
            });
        }else if(nextProps.panes && !nextProps.activeKeyNoChange){
            this.setState({
                panes:nextProps.panes,
                activeKey:nextProps.panes[0].id,
            });
        }else {
            this.setState({
                panes:nextProps.panes,
            });
        }
    }
}


Pages.propTypes = {
    category: PropTypes.object,
    loading: PropTypes.object,
    dispatch: PropTypes.func,
};

export default connect(({ category, loading }) => ({ category, loading }))(Pages);
